<template>
  <div class="real-time-chart">
    <!-- <div class="chart-header">
      <h3>{{ title }}</h3>
      <Button type="primary" @click="handleRefresh">刷新</Button>
    </div> -->
    <div ref="chart" class="chart-container"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import * as echarts from 'echarts';
import { Button } from 'view-design';

@Component({
  components: { Button }
})
export default class RealTimeChart extends Vue {
  @Prop({ type: String, required: true }) readonly type!:
    | 'daily'
    | 'process_daily';

  @Prop({ required: true }) readonly data!: any;

  chart: echarts.ECharts | null = null;

  get title() {
    return this.type === 'daily' ? '当天任务量统计' : '按工艺统计当天挂组数';
  }

  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize);
  }

  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      window.removeEventListener('resize', this.handleResize);
    }
  }

  @Watch('data', { deep: true })
  onDataChange() {
    this.updateChart();
  }

  initChart() {
    this.chart = echarts.init(this.$refs.chart as HTMLElement);
    this.updateChart();
  }

  private handleResize() {
    this.chart?.resize();
  }

  updateChart() {
    if (!this.chart) return;

    const option = {
      title: {
        text: this.title,
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: this.getXAxisData()
      },
      yAxis: {
        type: 'value'
      },
      toolbox: {
        right: 10,
        feature: {
          saveAsImage: {}
        }
      },
      series: this.getSeriesData(),
      color: ['#FFA500', '#FF8C00', '#32CD32'],
      legend: {
        data: ['待加工', '加工中', '已完成'],
        bottom: 0
      }
    };

    this.chart.setOption(option);
  }

  getXAxisData() {
    if (this.type === 'daily') {
      return ['挂组数', '派工单数', '零件数'];
    }
    return this.data.map((d: any) => d.process);
  }

  getSeriesData() {
    if (this.type === 'daily') {
      return [
        {
          name: '待加工',
          type: 'bar',
          data: [
            this.data.hang_group.pending,
            this.data.work_order.pending,
            this.data.part.pending
          ]
        },
        {
          name: '加工中',
          type: 'bar',
          data: [
            this.data.hang_group.processing,
            this.data.work_order.processing,
            this.data.part.processing
          ]
        },
        {
          name: '已完成',
          type: 'bar',
          data: [
            this.data.hang_group.completed,
            this.data.work_order.completed,
            this.data.part.completed
          ]
        }
      ];
    }

    return [
      {
        name: '待加工',
        type: 'bar',
        data: this.data.map((d: any) => d.pending)
      },
      {
        name: '加工中',
        type: 'bar',
        data: this.data.map((d: any) => d.processing)
      },
      {
        name: '已完成',
        type: 'bar',
        data: this.data.map((d: any) => d.completed)
      }
    ];
  }

  // handleRefresh() {
  //   this.$emit('refresh');
  // }
}
</script>

<style lang="scss" scoped>
.real-time-chart {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 5px;
  padding: 10px 0 0 10px;

  .chart-container {
    flex: 1;
    min-height: 0;
  }
}
</style>
